<template>
  <div>
    <div class="tagTitle">
      <b style="margin-left: 10px">tagTitle</b>
    </div>
    <ul class="titleArr" v-for="(item, index) in tagArr" :key="index">
      <li @click="tagDet()">{{ item.label }}</li>
    </ul>
  </div>
</template>
<script>
import { TagTitle } from "../api/index";
export default {
  data() {
    return {
      tagArr: [],
    };
  },
  mounted() {
    this.TagTitle();
  },
  methods: {
    async TagTitle() {
      const { data } = await TagTitle();
      this.tagArr = data.data;
      console.log(data.data);
    },
    tagDet(id) {
      this.$router.push(`/tagdetail/${id}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.tagTitle {
  width: 330px;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  border-bottom: 1px solid #f4f4f4;
  position: relative;
}
.tagTitle b {
  margin-top: 8px;
  position: absolute;
  margin-left: 5px;
}
.tagTitle {
  width: 330px;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  border-bottom: 1px solid #f4f4f4;
  position: relative;
}
.tagTitle b {
  margin-top: 8px;
  position: absolute;
  margin-left: 5px;
}
.titleArr li {
  float: left;
  color: #5f5f5f;
  width: 80px;
  height: 25px;
  line-height: 25px;
  margin: 7px 10px 3px 5px;
  border: solid 1px #ddd;
  text-align: center;
}

.titleArr li:hover {
  color: red;
}
.remonendBox {
  animation: wrapper-gradient 2s linear;
}
.titleArr {
  animation: wrapper-gradient 2s linear;
}
@keyframes wrapper-gradient {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes img-gradient {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
</style>
